<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物中心</title>
</head>

<style>

    body{
        font-family: 楷体;
    }

    div[id="anvbottom"]{
        position:absolute ;
        top:0%;
        left:0%;
        right: 0%;
        width:100%;
        height:150px;
        background-color: rgba(255, 255, 255);
        z-index: -1;
            
    }
        button[id="cancelSearch"]{
            position: absolute;
            font-size: 20px;
            right:60px;
            top:50px;
            padding: 5px;
            border-radius: 10px;
            background-color: rgba(255, 0, 0, 0.6);
            text-decoration: none;
            border: 0px;
        }button[id="cancelSearch"]:hover{
            color:rgb(255, 255, 255);
            padding: 8px;
        }button[id="cancelSearch"]:link{
            color:rgb(255, 255, 255);
        }
        form[id="searchForm"]{
            position: absolute;
            top:50px;
            left:600px;
        }
        input[id="searchButton"]{
            padding:8px;
            border-radius: 8px;
            border:none;
            color:rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.1);
        }
        input[type="text"]{
            padding:8px;
            width:300px;
            height:20px;
            border-radius: 8px;
            opacity: 0.8;
        }
        a[id="locateTo1"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo2"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo3"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo4"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo5"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
    div[id="anv0"]{
        position:absolute ;
        top:0%;
        left:0%;
        right: 0%;
        width:100%;
        height:120px;
		background:linear-gradient(to bottom,rgba(255, 255, 255, 0.3) 0.01%,rgb(0,0,0,0)) ;
        z-index:999;
    }
    div[id="anv0"]:hover{
    	background:none;
        background-color: rgb(255, 255, 255);
    }
        div[id="anv0-1"]{
            position: absolute;
            top:45px;
            left:35px;
            width:150px;
            height:55px;
        }
        p[id="brandName"]{
            font-size: 40px;
            color: white;
            font-family:fantasy;
            margin: 0px;
        }
        button[id="showSearch"]{
            color:white;
            font-size:18px;
            width:40x;
            border:none;
            margin: 0px;
            background-color: rgb(0,0,0,0);
        }button[id="showSearch"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:60px;
        	border-radius:10px;
        	padding:8px;
        }
        a[id="randomP1"]{
            color:white;
            font-size:20px;
            font-weight: bold;
            margin: 0px;
        }a[id="randomP1"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:50px;
        	border-radius:10px;
        	padding:10px;
        }
        a[id="randomP2"]{
            color:white;
            width:100px;
            font-size:20px;
            font-weight: bold;
            margin: 0px;
        }a[id="randomP2"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:100px;
        	color:black;
        	border-radius:10px;
        	padding:10px;
        }
        a:link{
            text-decoration: none;
        }

    div[id="anv2"]{
        position: absolute;
        top:0px;
        left:0%;
        height:1000px;
        width:auto;
    }
        p[id="anv2-p1"]{
            position: absolute;
            top:750px;
            left:10px;
            color:white;
            font-size: 30px;
            font-family:fantasy;
            margin:20px;
        }


    
    p[id="newest-p"]{
        position: absolute;
        top:900px;
        left:600px;
        color:rgb(0, 0, 0);
        font-size: 30px;
        font-family:fantasy;
        margin:20px;
    }
    div[id="newestImg"]{
        position: absolute;
        left:140px;
        top:1000px;
        height:200px;
        width:auto;
    }

    li[id="li-1"]{
        position: relative;
        left:210px;
        top:1450px;
        list-style: none;
        width:300px;
        height:300px;
        margin:20px;
        float: left;
        border: none;
    }
        img[id="imgHot"]{
            border-color: rgb(0, 0, 0);
            border-radius: 10px;
        }
        p[id="hot-p"]{
            position: absolute;
            top:1350px;
            left:650px;
            color:rgb(255, 255, 255);
            font-size: 30px;
            font-family:fantasy;
            margin:20px;
        }

        div[id="anv3"]{
            position: absolute;
            top: 1350px;
            left:0%;
            width:100%;
            height: 800px;
            background-color: rgb(97, 100, 255);
            z-index:-1;
        }

        img[id="anv3-img2"]{
            position: absolute;
            left:320px;
            top:1500px;
            width:250px;
            height:310px;
            border-radius: 5px;
        }
        div[id="cover1"]{
            position: absolute;
            left:320px;
            top:1500px;
            width:250px;
            height:310px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover1"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img3"]{
            position: absolute;
            left:320px;
            top:1820px;
            width:250px;
            height:310px;
            border-radius: 5px;
        }
        div[id="cover2"]{
            position: absolute;
            left:320px;
            top:1820px;
            width:250px;
            height:310px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover2"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img4"]{
            position: absolute;
            left:580px;
            top:1500px;
            width:400px;
            height:630px;
            border-radius: 5px;
        }
        div[id="cover3"]{
            position: absolute;
            left:580px;
            top:1500px;
            width:400px;
            height:630px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover3"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img5"]{
            position: absolute;
            left:990px;
            top:1500px;
            width:200px;
            height:200px;
            border-radius: 5px;
        }
        div[id="cover4"]{
            position: absolute;
            left:990px;
            top:1500px;
            width:200px;
            height:200px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover4"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img6"]{
            position: absolute;
            left:990px;
            top:1710px;
            width:200px;
            height:200px;
            border-radius: 5px;
        }
        div[id="cover5"]{
            position: absolute;
            left:990px;
            top:1710px;
            width:200px;
            height:200px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover5"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img7"]{
            position: absolute;
            left:990px;
            top:1920px;
            width:200px;
            height:210px;
            border-radius: 5px;
        }
        div[id="cover6"]{
            position: absolute;
            left:990px;
            top:1920px;
            width:200px;
            height:210px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover6"]:hover{
            opacity:1 ;
        }
    
</style>

<body>
    
    
    <div id="anvbottom">
        <form id="searchForm">
            <input type="text">
            &nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" id="searchButton" value="查找">
        </form>
        <button href="#" id="cancelSearch" onClick="cancelSearch()">×</button>
    </div>
    <div id="anv0">

        <table border="0">
            <tr>
                <td width="50px" height="40px">&nbsp;</td>
                <td width="20px">&nbsp;</td>
                <td width="90px">&nbsp;</td>
                <td width="60px">&nbsp;</td>
                <td rowspan="2" width="1100px" align="center" valign="middle">
                    <p id="brandName">B U Y&nbsp;&nbsp;&nbsp;I T&nbsp;&nbsp;&nbsp;S H O P</p>
                </td>
                <td width="200px">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td></td>
                <td ></td>
                <td></td>
                <td><a id="randomP1" onclick="backToMainScene()">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a id="randomP2" onclick="goPersonalDetails()">个人中心</a></td>
            </tr>
            <tr>
                <td height="30px">&nbsp;</td>
                <td></td>
                <td></td>
                <td></td>
                <td align="center" valign="middle">
                    <a id="locateTo1" href="productsDetails.jsp?root=all">ALL</a> 
                    <a id="locateTo2" href="productsDetails.jsp?root=man">MAN-CLOTHING</a>
                    <a id="locateTo3" href="productsDetails.jsp?root=female">FEMALE-CLOTHING</a>
                    <a id="locateTo4" href="productsDetails.jsp?root=bag">BAG</a>
                    <a id="locateTo5" href="productsDetails.jsp?root=jewelry">JEWELRY</a>
                </td>
                <td></td>
            </tr>

        </table>
    
    </div>
    

    <div id="anv2">
        <video src="viedo/1.mp4" height="auto" width="1520px" autoplay="autoplay" muted="true" loop="loop" style="z-index:-99"></video>
    </div>
    
    <p id="anv2-p1">The Trend Of Choice <br>Choice Of Quality </p>

    <p id="newest-p">——Latest Products——<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;最新产品</p>
    <div id="newestImg">
        <a target="_blank" href="purchase.jsp?product=花卉印花真丝连衣裙"><img id="imgHot" src="shopCenterImgs/female-clothing/1.png" width="300px" height="300px"></a>
        <a target="_blank" href="purchase.jsp?product=Jackie 1961系列小号手袋"><img id="imgHot" src="shopCenterImgs/bag/6.png" width="300px" height="300px"></a>
        <a target="_blank" href="purchase.jsp?product=复古花朵和小马印花棉质保龄球衫"><img id="imgHot" src="shopCenterImgs/man-clothing/13.png" width="300px" height="300px"></a>
        <a target="_blank" href="purchase.jsp?product=互扣式双G马衔索式戒指"><img id="imgHot" src="shopCenterImgs/jewelry/6.png" width="300px" height="300px"></a>
    </div>

    <p id="hot-p">Popular Products<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热门产品</p>
    <div id="anv3"> <video src="viedo/3.mp4" height="auto" width="1520px" autoplay="autoplay" muted="true" loop="loop" style="z-index:-99"></video></div>
    <a target="_blank" href="purchase.jsp?product=互扣式双G链条真丝夹克"><img id="anv3-img2" src="shopCenterImgs/female-clothing/4.png" /><div id="cover1"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=平纹针织棉卫衣"><img id="anv3-img3" src="shopCenterImgs/female-clothing/8.png" /><div id="cover2"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=饰马衔扣丹宁面料连衣裙"><img id="anv3-img4" src="shopCenterImgs/female-clothing/5.png" /><div id="cover3"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=水晶1921印花卫衣"><img id="anv3-img5" src="shopCenterImgs/man-clothing/6.png" /><div id="cover4"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>        
    <a target="_blank" href="purchase.jsp?product=复古花朵和小马印花棉质保龄球衫"><img id="anv3-img6" src="shopCenterImgs/man-clothing/13.png" /><div id="cover5"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=Jackie 1961系列小号手袋"><img id="anv3-img7" src="shopCenterImgs/bag/6.png" /><div id="cover6"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>


    



<script>

    const searchImgEvent=document.getElementById("anv0");
    searchImgEvent.onmouseenter=function(){
        document.getElementById("brandName").style.color="black";
        document.getElementById("randomP1").style.color="black";
        document.getElementById("randomP2").style.color="black";
        document.getElementById("locateTo1").style.color="black";
        document.getElementById("locateTo2").style.color="black";
        document.getElementById("locateTo3").style.color="black";
        document.getElementById("locateTo4").style.color="black";
        document.getElementById("locateTo5").style.color="black";
    }
    searchImgEvent.onmouseleave=function(){
        document.getElementById("brandName").style.color="white";
        document.getElementById("randomP1").style.color="white";
        document.getElementById("randomP2").style.color="white";
        document.getElementById("locateTo1").style.color="white";
        document.getElementById("locateTo2").style.color="white";
        document.getElementById("locateTo3").style.color="white";
        document.getElementById("locateTo4").style.color="white";
        document.getElementById("locateTo5").style.color="white";
    }

    function cancelSearch(){
        document.getElementById("anvbottom").style.zIndex=-1;
        document.getElementById("anv0").style.zIndex=999;
    }

    function showSearch(){
        document.getElementById("anvbottom").style.zIndex=999;
        document.getElementById("anv0").style.zIndex=-1;
    }
    
    function backToMainScene(){
    	window.location.href="mainScene.jsp";
    }
    function goPersonalDetails(){
    	window.location.href="personalDetails.jsp";
    }

</script>
    

</body>
</html>